import GameConfig from '../config/GameConfig.js';
import Canvas from '../utils/Canvas.js';
import Animation from '../utils/Animation.js';
import SettingsMenu from './SettingsMenu.js';
import SoundManager from '../utils/SoundManager.js';
/**
 * 游戏菜单类
 */
export default class GameMenu {
    /**
     * 初始化游戏菜单
     * @param {CanvasRenderingContext2D} ctx - Canvas上下文
     */
    constructor(ctx) {
        this.ctx = ctx;
        this.buttonHovered = false;
        this.particles = [];
        this.createParticles();
        // 初始化设置菜单
        this.settingsMenu = new SettingsMenu();
        this.settingsVisible = false;
    }

    /**
     * 绘制菜单
     */
    draw() {
        this.drawBackground();
        this.drawTitle();
        this.drawStartButton();
        this.drawSettingsButton(); // 添加设置按钮
        this.drawInstructions();
    }

    /**
     * 绘制背景
     */
    drawBackground() {
        // 绘制渐变背景
        const gradient = this.ctx.createLinearGradient(
            0, 0, 0, this.ctx.canvas.height
        );
        gradient.addColorStop(0, '#1a2a6c');
        gradient.addColorStop(0.5, '#b21f1f');
        gradient.addColorStop(1, '#fdbb2d');
        
        this.ctx.fillStyle = gradient;
        this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

        // 更新和绘制粒子
        this.updateParticles();
        this.drawParticles();
    }


    /**
     * 绘制标题
     */
    drawTitle() {
        this.ctx.save();
        
        const centerX = this.ctx.canvas.width / 2;
        const titleY = this.ctx.canvas.height * 0.25;
        
        // 主标题外发光效果 - 调整发光颜色和强度
        this.ctx.shadowColor = 'rgba(255, 255, 255, 0.4)';  // 降低发光强度
        this.ctx.shadowBlur = 25;
        this.ctx.shadowOffsetY = 0;
        
        // 主标题 3D 效果
        const layers = 8;
        for(let i = layers; i >= 0; i--) {
            const offset = i * 1.5;
            // 使用更柔和的颜色
            this.ctx.fillStyle = `rgba(255, 255, 255, ${i === 0 ? 0.9 : 0.08})`;  // 降低不透明度
            this.ctx.font = `bold 80px "Microsoft YaHei"`;
            this.ctx.textAlign = 'center';
            this.ctx.textBaseline = 'middle';
            this.ctx.fillText('贪吃蛇', 
                centerX + offset, 
                titleY + offset
            );
        }
        
        // 主标题描边 - 更柔和的描边
        this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';  // 降低描边不透明度
        this.ctx.lineWidth = 1.5;  // 减小描边宽度
        this.ctx.strokeText('贪吃蛇', centerX, titleY);
        
        // 主标题最终层 - 更柔和的颜色
        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';  // 降低主标题不透明度
        this.ctx.fillText('贪吃蛇', centerX, titleY);
        
        // 副标题光晕效果 - 更柔和
        this.ctx.shadowColor = 'rgba(255, 255, 255, 0.3)';  // 降低副标题发光强度
        this.ctx.shadowBlur = 10;
        this.ctx.shadowOffsetY = 0;
        
        // 副标题渐变 - 更柔和的颜色
        const subtitleGradient = this.ctx.createLinearGradient(
            centerX - 100, 
            titleY + 60, 
            centerX + 100, 
            titleY + 60
        );
        subtitleGradient.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
        subtitleGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.8)');
        subtitleGradient.addColorStop(1, 'rgba(255, 255, 255, 0.4)');
        
        // 副标题
        this.ctx.font = 'bold 28px Arial';
        this.ctx.fillStyle = subtitleGradient;
        this.ctx.fillText('SNAKE GAME', 
            centerX,
            titleY + 60
        );
        
        // 装饰线条 - 更柔和的效果
        this.drawDecorativeLine(centerX, titleY + 90);
        
        this.ctx.restore();
    }
    

  /**
   * 绘制开始按钮
   */
  drawStartButton() {
    const buttonWidth = 280;  // 增加按钮宽度
    const buttonHeight = 70;  // 增加按钮高度
    const x = (this.ctx.canvas.width - buttonWidth) / 2;
    const y = this.ctx.canvas.height * 0.45;

    this.ctx.save();

    // 外发光效果
    this.ctx.shadowColor = 'rgba(76, 175, 80, 0.4)';
    this.ctx.shadowBlur = 20;
    this.ctx.shadowOffsetY = 0;

    // 按钮主体渐变
    const gradient = this.ctx.createLinearGradient(x, y, x, y + buttonHeight);
    gradient.addColorStop(0, '#5CDB5C');  // 更鲜艳的绿色
    gradient.addColorStop(0.5, '#4CAF50');
    gradient.addColorStop(1, '#45a049');
    
    this.ctx.fillStyle = gradient;
    Canvas.roundRect(this.ctx, x, y, buttonWidth, buttonHeight, 35);  // 更大的圆角
    this.ctx.fill();

    // 按钮内部光泽效果
    const glossGradient = this.ctx.createLinearGradient(x, y, x, y + buttonHeight/2);
    glossGradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
    glossGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
    this.ctx.fillStyle = glossGradient;
    Canvas.roundRect(this.ctx, x, y, buttonWidth, buttonHeight, 35);
    this.ctx.fill();

    // 按钮文字
    this.ctx.fillStyle = '#FFFFFF';
    this.ctx.font = 'bold 32px "Microsoft YaHei"';  // 更大的字体
    this.ctx.textAlign = 'center';
    this.ctx.textBaseline = 'middle';
    
    // 文字阴影
    this.ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    this.ctx.shadowBlur = 4;
    this.ctx.shadowOffsetY = 2;
    
    this.ctx.fillText('开始游戏', 
        this.ctx.canvas.width / 2, 
        y + buttonHeight / 2
    );

    this.ctx.restore();
  }

  /**
   * 绘制游戏说明
   */
  drawInstructions() {
    this.ctx.save();
    
    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';  // 增加透明度
    this.ctx.font = '20px "Microsoft YaHei"';  // 调整字体大小
    this.ctx.textAlign = 'center';
    
    // 添加文字阴影
    this.ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    this.ctx.shadowBlur = 4;
    this.ctx.shadowOffsetY = 2;
    
    const instructions = [
        '使用方向键或WASD控制蛇的移动',
        'ESC键暂停游戏'
    ];
    
    instructions.forEach((text, index) => {
        this.ctx.fillText(text, 
            this.ctx.canvas.width / 2, 
            this.ctx.canvas.height * 0.75 + index * 35  // 增加行间距
        );
    });
    
    this.ctx.restore();
  }

  /**
   * 创建背景粒子
   */
  createParticles() {
      for (let i = 0; i < 50; i++) {
          this.particles.push({
              x: Math.random() * this.ctx.canvas.width,
              y: Math.random() * this.ctx.canvas.height,
              size: Math.random() * 3 + 1,
              speedY: -Math.random() * 2 - 1
          });
      }
  }

  /**
   * 更新粒子位置
   */
  updateParticles() {
      this.particles.forEach(particle => {
          particle.y += particle.speedY;
          if (particle.y < 0) {
              particle.y = this.ctx.canvas.height;
              particle.x = Math.random() * this.ctx.canvas.width;
          }
      });
  }

  /**
   * 绘制粒子
   */
  drawParticles() {
      this.ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      this.particles.forEach(particle => {
          this.ctx.beginPath();
          this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
          this.ctx.fill();
      });
  }

  /**
   * 检查是否点击了开始按钮
   * @param {number} x - 点击的x坐标
   * @param {number} y - 点击的y坐标
   * @returns {boolean}
   */
  isStartButtonClicked(x, y) {
    const buttonWidth = 240;  // 更新点击检测区域
    const buttonHeight = 60;
    const buttonX = (this.ctx.canvas.width - buttonWidth) / 2;
    const buttonY = this.ctx.canvas.height * 0.45;

    return x >= buttonX && x <= buttonX + buttonWidth &&
           y >= buttonY && y <= buttonY + buttonHeight;
  }

  /**
     * 绘制设置按钮
     */
  drawSettingsButton() {
    const buttonWidth = 280;  // 与开始按钮相同宽度
    const buttonHeight = 70;
    const x = (this.ctx.canvas.width - buttonWidth) / 2;
    const y = this.ctx.canvas.height * 0.6;

    this.ctx.save();

    // 外发光效果
    this.ctx.shadowColor = 'rgba(33, 150, 243, 0.4)';
    this.ctx.shadowBlur = 20;
    this.ctx.shadowOffsetY = 0;

    // 按钮主体渐变
    const gradient = this.ctx.createLinearGradient(x, y, x, y + buttonHeight);
    gradient.addColorStop(0, '#42A5F5');  // 更鲜艳的蓝色
    gradient.addColorStop(0.5, '#2196F3');
    gradient.addColorStop(1, '#1976D2');
    
    this.ctx.fillStyle = gradient;
    Canvas.roundRect(this.ctx, x, y, buttonWidth, buttonHeight, 35);
    this.ctx.fill();

    // 按钮内部光泽效果
    const glossGradient = this.ctx.createLinearGradient(x, y, x, y + buttonHeight/2);
    glossGradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
    glossGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
    this.ctx.fillStyle = glossGradient;
    Canvas.roundRect(this.ctx, x, y, buttonWidth, buttonHeight, 35);
    this.ctx.fill();

    // 按钮文字
    this.ctx.fillStyle = '#FFFFFF';
    this.ctx.font = 'bold 32px "Microsoft YaHei"';
    this.ctx.textAlign = 'center';
    this.ctx.textBaseline = 'middle';
    
    // 文字阴影
    this.ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    this.ctx.shadowBlur = 4;
    this.ctx.shadowOffsetY = 2;
    
    this.ctx.fillText('设置', 
        this.ctx.canvas.width / 2, 
        y + buttonHeight / 2
    );

    this.ctx.restore();
}

/**
 * 检查是否点击了设置按钮
 * @param {number} x - 点击的x坐标
 * @param {number} y - 点击的y坐标
 * @returns {boolean}
 */
isSettingsButtonClicked(x, y) {
    const buttonWidth = 240;  // 更新点击检测区域
        const buttonHeight = 60;
        const buttonX = (this.ctx.canvas.width - buttonWidth) / 2;
        const buttonY = this.ctx.canvas.height * 0.6;

        return x >= buttonX && x <= buttonX + buttonWidth &&
               y >= buttonY && y <= buttonY + buttonHeight;
}

/**
 * 显示设置菜单
 */
showSettings() {
    this.settingsMenu.show();
    this.settingsVisible = true;
}

/**
 * 隐藏设置菜单
 */
hideSettings() {
    this.settingsMenu.hide();
    this.settingsVisible = false;
}

/**
 * 绘制装饰线条
 */
drawDecorativeLine(centerX, y) {
    const lineWidth = 200;
    const lineHeight = 2;
    
    this.ctx.save();
    
    // 线条渐变 - 更柔和的颜色
    const lineGradient = this.ctx.createLinearGradient(
        centerX - lineWidth/2, y,
        centerX + lineWidth/2, y
    );
    lineGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
    lineGradient.addColorStop(0.2, 'rgba(255, 255, 255, 0.3)');
    lineGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.7)');
    lineGradient.addColorStop(0.8, 'rgba(255, 255, 255, 0.3)');
    lineGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
    
    // 绘制主线条
    this.ctx.fillStyle = lineGradient;
    this.ctx.fillRect(
        centerX - lineWidth/2,
        y,
        lineWidth,
        lineHeight
    );
    
    // 装饰点 - 更柔和的效果
    this.ctx.beginPath();
    this.ctx.arc(centerX, y + lineHeight/2, 3, 0, Math.PI * 2);
    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
    this.ctx.fill();
    
    // 两侧小点
    [-lineWidth/4, lineWidth/4].forEach(offset => {
        this.ctx.beginPath();
        this.ctx.arc(centerX + offset, y + lineHeight/2, 2, 0, Math.PI * 2);
        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        this.ctx.fill();
    });
    
    this.ctx.restore();
}
/**
 * 创建动态粒子效果
 */
createParticles() {
    for (let i = 0; i < 50; i++) {
        this.particles.push({
            x: Math.random() * this.ctx.canvas.width,
            y: Math.random() * this.ctx.canvas.height,
            size: Math.random() * 3 + 1,
            speedY: -Math.random() * 2 - 1,
            opacity: Math.random() * 0.5 + 0.5
        });
    }
}

/**
 * 更新粒子
 */
updateParticles() {
    this.particles.forEach(particle => {
        particle.y += particle.speedY;
        particle.opacity = Math.sin(Date.now() / 1000 + particle.y) * 0.3 + 0.7;
        
        if (particle.y < 0) {
            particle.y = this.ctx.canvas.height;
            particle.x = Math.random() * this.ctx.canvas.width;
        }
    });
}

/**
 * 绘制粒子
 */
drawParticles() {
    this.particles.forEach(particle => {
        this.ctx.beginPath();
        this.ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`;
        this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        this.ctx.fill();
    });
}
}